<template>
  <div id="container" style="width: 1300px; height: 600px"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  var map = new BMapGL.Map('container') // 创建地图实例
  var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
  map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
  var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
  map.addControl(zoomCtrl)
  var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)
  // 添加全景控件
  var stCtrl = new BMapGL.PanoramaControl()
  stCtrl.setOffset(new BMapGL.Size(0, 0))
  map.addControl(stCtrl)
})
</script>
